<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解文件 accept属性</title>
</head>

<body>
  <div>
    <h1>只能选择.png和.jpg文件</h1>
    <input type="file" id="file-uploader" accept=".jpg, .png" multiple>
    <p>Upload files and see the output in browser console</p>
  </div>
</body>
<script>
  /*
  我们可以使用 accept 属性来限制要上传的文件的类型，您可能希望在用户上传个人资料图片时，只显示允许浏览png格式图片类型。
  请注意，在这种情况下，文件浏览器会自动将文件选择类型设置为自定义而不是全部。但是，如果需要，您始终可以将其更改回所有文件。
  */
  const fileUploader = document.getElementById('file-uploader');

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    console.log('files', files);
  });
</script>

</html>